---
type: tutorial
title: Schreibe deinen ersten Markdown-Blogbeitrag
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Füge deiner Website Markdown-Seiten hinzu
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Jetzt, da du Seiten mit `.astro`-Dateien erstellt hast, ist es an der Zeit, Blogbeiträge mit `.md`-Dateien zu schreiben!

<PreCheck>
  - einen neuen Ordner zu erstellen und einen neuen Beitrag anzulegen
  - etwas Markdown-Inhalt zu schreiben
  - deine Blogbeiträge auf deiner Blog-Seite zu verlinken
</PreCheck>

## Erstelle deine erste `.md`-Datei

<Steps>
1. Erstelle ein neues Verzeichnis unter `src/pages/posts/`.

2. Lege in deinem neuen `/posts/`-Ordner eine (leere) Datei namens `post-1.md` an.

3. Rufe diese Seite in deiner Browser-Vorschau auf, indem du `/posts/post-1` an deine bestehende Vorschau-URL anhängst (z. B. `http://localhost:4321/posts/post-1`).

4. Ändere die Vorschau-URL im Browser zu `/posts/post-2` (diese Seite existiert noch nicht).

   Achte auf den Unterschied in der Ausgabe zwischen einer „leeren“ Seite und einer, die nicht existiert. Das hilft dir später beim Beheben von Problemen.
</Steps>

## Schreibe Markdown-Inhalt

<Steps>
1. Kopiere oder tippe den folgenden Code in `post-1.md` ein.

2. Überprüfe deine Browser-Vorschau erneut unter `http://localhost:4321/posts/post-1`.
   Du solltest jetzt Inhalt auf dieser Seite sehen. Er ist möglicherweise noch nicht richtig formatiert, aber keine Sorge – du wirst das später im Tutorial anpassen!

3. Öffne die DevTools deines Browsers und untersuche die Seite.
   Dir wird auffallen, dass dein Markdown automatisch in HTML umgewandelt wurde, obwohl du keine HTML-Elemente geschrieben hast. Du kannst dort Überschriften, Absätze und Listenelemente sehen.
</Steps>

:::note
Die Informationen am Anfang der Datei, innerhalb der Code-Abgrenzungen, nennt man *Frontmatter*.
Diese Daten – einschließlich Tags und Beitragsbild – sind Informationen *über* deinen Beitrag, die Astro nutzen kann.  
Sie erscheinen nicht automatisch auf der Seite, aber du wirst sie später im Tutorial verwenden, um deine Website zu erweitern.
:::

## Verlinke deine Beiträge

<Steps>
1. Verlinke deinen ersten Beitrag mit einem Anker-Tag in `src/pages/blog.astro`.

2. Füge anschließend zwei weitere Dateien in `src/pages/posts/` hinzu: `post-2.md` und `post-3.md`.  
   Du kannst den untenstehenden Beispielcode verwenden oder eigene Texte schreiben.

3. Füge Links zu diesen neuen Beiträgen hinzu.

4. Überprüfe in der Browser-Vorschau, ob alle Links zu Beitrag 1, Beitrag 2 und Beitrag 3 auf funktionierende Seiten führen.  
   (Wenn etwas nicht klappt, überprüfe deine Links in `blog.astro` oder die Dateinamen deiner Markdown-Dateien.)
</Steps>

<Box icon="question-mark">
### Teste dein Wissen

1. Inhalt in einer Markdown-Datei (`.md`) wird umgewandelt in:
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich kann innerhalb von `src/pages/` einen neuen Ordner für meine Blogbeiträge erstellen.
- [ ] Ich kann eine neue Markdown-Datei (`.md`) für einen Blogbeitrag anlegen.
- [ ] Ich verstehe, dass Markdown eine weitere Sprache ist, die – wie Astro – in meinem Browser HTML erzeugt.
</Checklist>
</Box>

### Ressourcen

- [Markdown-Cheatsheet vom Markdown-Guide](https://www.markdownguide.org/cheat-sheet/) <Badge class="neutral-badge" text="extern" />

- [Was sind Entwickler-Tools im Browser? – MDN](https://developer.mozilla.org/de/docs/Learn/Common_questions/What_are_browser_developer_tools) <Badge class="neutral-badge" text="extern" />

- [YAML-Frontmatter](https://assemble.io/docs/YAML-front-matter.html) <Badge class="neutral-badge" text="extern" />
